<template>
  <div v-show="$route.name == 'show-update'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/show-list' }">展厅列表
    </el-breadcrumb-item>
      <el-breadcrumb-item>修改订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">订单信息编辑</div>
      <el-form :model="showForm" :rules="showFormRules" ref="showForm" label-width="110px" class="demo-orderForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="日期" prop="date">
              <el-date-picker type="date" placeholder="选择日期" v-model="showForm.date" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="showForm.customer" placeholder="请选择名称" clearable popper-class="dropdownbox" filterable >
                <el-option v-for="element in customerList"
                  :label="element.company"
                  :value="element.company">
                  <span style="float: left">{{ element.company }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户地址" prop="address">
              <el-input v-model="showForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="联系人" prop="cname">
              <el-input v-model="showForm.cname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="showForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="安装日期" prop="installtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="showForm.installtime" value-format='yyyy-MM-dd'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安装时间" prop="itime">
              <el-time-picker
                v-model="showForm.itime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="任意时间点"
                value-format='HH:mm:ss'>
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 卡片视图区域--详情数据修改 -->
    <el-card style="margin-top: 10px;">
      <div style="margin-bottom: 20px;">单品信息编辑</div>
      <el-form :model="updateForm" :rules="updateFormRules" ref="updateForm" label-width="110px" class="demo-updateForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="新旧" prop="new">
              <el-radio-group v-model="updateForm.new" disabled>
                <el-radio :label="1">全新</el-radio>
                <el-radio :label="0">旧品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型" prop="product">
              <el-input v-model="updateForm.product" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称" prop="productn">
              <el-input v-model="updateForm.productn" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号" prop="model">
              <el-input v-model="updateForm.model" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="展览类型" prop="state">
              <el-radio-group v-model="updateForm.state">
                <el-radio :label="0">体验机</el-radio>
                <el-radio :label="1">样品机</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 如果在展或待定 可以相互转换-->
            <el-form-item label="状态" prop="states" v-if="updateForm.states == 1 || updateForm.states == 3">
              <el-radio-group v-model="updateForm.states" :disabled="updateForm.states === 3 ? false : true">
                <el-radio :label="1">在展</el-radio>
                <el-radio :label="3">待定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数量" prop="amoumt">
              <el-input-number v-model="updateForm.amoumt" controls-position="right" :precision="0" :step="1" :min="0" disabled></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成本" prop="cost">
              <el-input-number v-model="updateForm.cost" controls-position="right" :precision="2" :step="1" :min="0" disabled></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="other">
              <el-input v-model="updateForm.other"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">修改保存</el-button>
            <el-button type="success" @click="purchase()" v-if="updateForm.states == 1 || updateForm.states == 3">购买</el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      showForm: {},
      showFormRules: {
        date: [{ required: true, 'message': '请输入日期', trigger: 'blur' }],
        customer: [{ required: true, 'message': '请选择客户名', trigger: 'change' }],
        address: [{ required: true, 'message': '请输入客户地址', trigger: 'blur' }],
        cname: [{ required: true, 'message': '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, 'message': '请输入联系方式', trigger: 'blur' }]
      },
      updateForm: {},
      updateFormRules: {
        state: [{ required: true, message: '请选择展厅状态', trigger: 'change' }],
        states: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      customerList: [],
    }
  },
  mounted() {
    this.getCustomerList()
    this.getShowData()
  },
  watch: {
    'showForm.customer': {
      handler: function(val, oldval) {
        if (val == '') {
          this.showForm.address = ''
          this.showForm.cname = ''
          this.showForm.phone = ''
        }
        var cusData = {}
        cusData = this.customerList.filter(element => {
          return val == element.company
        })
        if (typeof cusData !== 'undefined') {
          cusData = cusData[0]
          console.log(cusData);
          this.showForm.address = cusData.address
          this.showForm.cname = cusData.name
          this.showForm.phone = cusData.phone
        }
      }
    }
  },
  methods: {
    getShowData() {
      if (this.$route.name === 'show-update') {
        if (this.$route.params.id) {
          this.id = this.$route.params.id
          localStorage.setItem('ShowId', this.$route.params.id)
        } else {
          this.id = localStorage.getItem('ShowId')
        }
        this.getShow()
      }
    },
    // 获取客户数据
    async getCustomerList() {
      const { data: result } = await this.$http.post('/api-customer')
      this.customerList = result.data
    },
    // 获取展厅数据
    async getShow() {
      // 发起编辑的网络请求
      const { data: result } = await this.$http.get('/show/' + this.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      // 订单数据
      this.showForm = {
        'oid': result.data.oid,
        'date': result.data.date,
        'customer': result.data.customer,
        'address': result.data.address,
        'cname': result.data.cname,
        'phone': result.data.phone,
        'installtime': result.data.installtime,
        'itime': result.data.itime
      }
      // 单品数据
      this.updateForm = {
        'state': result.data.state,
        'product': result.data.product,
        'productn': result.data.productn,
        'model': result.data.model,
        'cost': result.data.cost,
        'amoumt': result.data.amoumt,
        'other': result.data.other,
        'states': result.data.states,
        'backtime': result.data.backtime,
        'new': parseInt(result.data.new),
        'unit': result.data.unit,
        'price': result.data.price,
        'discount': result.data.discount,
        'tprice': result.data.tprice,
        'paid': result.data.paid
      }
    },
    // 返回
    back() {
      this.$router.push({ 'name': 'show-list' })
    },
    async submitForm() {
      this.$refs.showForm.validate(async (valid) => {
        if (!valid) return
        this.$refs.updateForm.validate(async (valid) => {
          if (!valid) return
          // 可以发起新增入库单的网络请求
          const { data: result } = await this.$http.put('/show/' + this.id, {
            showForm: this.showForm,
            updateForm: this.updateForm
          })
          if (result.status !== 200) {
            return this.$message.error(result.msg)
          }
          this.$message.success('修改成功！')
          this.$router.push({ path: '/show-list' })
        })
      })
    },
    // 购买
    purchase() {
      this.$router.push({
        name: 'show-purchase',
        params: { id: this.id }
      })
    }
  }
}
</script>
